<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 创造一个空的 div -->
    <div class="container">

    </div>
    <button>删除 div</button>

    <script>
        // 使用 js 来创建一个 “节点"/元素
        // 通过 creatElement('div') 来添加一个元素
        // creatElement  就是字面意思创建一个 div 标签/元素
        let newDiv =  document.createElement('div');
        // 可以通过新建的 div 对象 newDiv 来给 新 div 标签，添加属性
        newDiv.id =  'newDiv';
        // 引入 一个 类名为 one 的 选择器。
        // 也就是 引入 一个 css 样式
        newDiv.className = 'one';
        // 通过 innerHTML，来赋予 div 标签的内容
        // div 开始标签  和 div 结束标签，中间夹着的那个部分。
        newDiv.innerHTML = 'hello';
        // 将 newDiv 打印在控制台上
        console.log(newDiv);
        // 获取 DOM 树上已经存在的节点对象
        let container = document.querySelector('.container');
        // 把我们创建的节点挂上去
        container.appendChild(newDiv);

        let button = document.querySelector('button');
        button.onclick = function(){
            // 父结点对象，已经在上面获取到了。
            // 至于 删除的节点，就是我们刚才创建节点（div标签）
            // 删除节点的对象就是 newDiv
            container.removeChild(newDiv);
        }
        </script>
</body>



<!-- <body> -->
    <!-- <style>
        .light{
            background-color: white;
            color: black;
        }
        .dark{
            background-color: black;
            color: white;
        }
    </style> -->
    <!-- 默认是白天 -->
    <!-- <div class="light" style="height: 500px;">这是一段话</div>
    <button>关灯</button> -->

    <!-- <script>
        let div = document.querySelector('div');
        let button = document.querySelector('button');
        button.onclick = function(){
            if(div.className == 'light'){
                div.className = 'dark';
                button.innerHTML = '开灯';
            }else if(div.className == 'dark'){
                div.className = 'light';
                button.innerHTML = '关灯';
            }
        }
    </script> -->
<!-- </body> -->


<!-- <body>
    <div style="font-size: 20px;">这是一个文本</div>
    <script>
        let div = document.querySelector('div');
        div.onclick = function(){
            // 1、先获取到当前字体的大小
            console.log(div.style.fontSize);
            let tmp = parseInt(div.style.fontSize);
            // 2、在当前字体大小的基础上，多增加 5px
            tmp += 5;
            div.style.fontSize = tmp + "px";
        }
    </script>
</body> -->


<!-- <body> -->
    <!-- <input type="checkbox" id="all"> 我全都要 <br>
    <input type="checkbox" class="girl"> 貂蝉 <br>
    <input type="checkbox" class="girl"> 小乔 <br>
    <input type="checkbox" class="girl"> 安其拉 <br>
    <input type="checkbox" class="girl"> 妲己 <br> -->

    <!-- <script>
        // 1、先获取到元素
        // let all = document.querySelector('#all');
        // 注意此时的 girls 是一个数组
        // let girls = document.querySelectorAll('.girl');

        // 2、给 all 注册点击事件
        // all.onclick = function(){
            // 对 girls 中每一个 girl 的 checked 属性，做出修改
                // for(let i = 0;i < girls.length;i++){
                // all.checked 就是 all 这个复选框的选中状态
                // 如果 all 是处于选中状态，那么all.checked里面的值就是 checked 
                // 反之，如果 all 没有处于选中状态，那么all.checked里面的值就是一个空的字符串
                // 通过这样的方式，就可以告知 girls[i] 结果。
                // 从而间接影响到 girls[i] 的状态。
        //         girls[i].checked = all.checked;
                
        //     }
        // }
        // 3、给 girls 注册 点击事件
        // 实现对于 all 的取消操作。
        // for(let i = 0;i < girls.length;i++){
        //     girls[i].onclick = function(){
                // 通过 checkGirls 函数，来再次循环遍历 girls 数组
                // 是否满足全都要的条件
                // 如果满足 全都要的条件（4位都处于选中状态），就会自动勾选上 ‘我全都要’
                // 如果不满足 全都要的条件（有一位没有被选中），就会自动取消勾选 ‘我全都要’
        //         all.checked = checkGirls(girls);
        //     }
        // }
        // function checkGirls(girls){
            // 在这里，我们进行判断：是否满足 ‘全都要’ 的勾选条件
            // for (let i = 0; i < girls.length; i++) {
                // 如果 girls[i] 处于 未选中状态，checked 值为空，即为假
                // 前面加上 ！
                // 就意味着 只要有一位girl没有被选中，就会终止循环，返回一个空字符串
                // 对于调用者来说，即为假。
            //     if(!girls[i].checked){
            //         return '';
            //     }
            // }
            // 遍历了一圈，发现所有girl 都处于选中状态
            // 返回一个 checked 字符，对于调用者来说，即为真。
        //     return 'checked';
        // }

    </script> -->
<!-- </body> -->
<!-- <body>
    <input type="button" value="播放">
    <script>
        let input = document.querySelector('input');
        input.onclick = function(){
            if(input.value == '播放'){
                input.value = '暂停';
            }else if(input.value == '暂停'){
                input.value = '播放';
            }
        }
    </script>
</body> -->

<!-- <body>
    <img src="joker.jpg" alt="">
    <script>
        let img = document.querySelector('img');
        console.dir(img);
    </script>
</body> -->


<!-- <body>
    <img src="joker.jpg" alt=""> -->
    <!-- <script>
        // let img = document.querySelector('img');
        // 注意！只要是一个 HTML元素，就都会有 onclick 属性
        // img.onclick = function(){
            // 直接 img.src，就能获取到就能获得当前属性的内容
            // console.log(img.src);
            // 使用 indexOf 来判断 src 属性中，是否包含 “joker.jpg” 的字符串
            // indexOf 的功能 和 就是 Java中的，是一样的。
            // 如果调用者里面包含“joker.jpg”子串，就会返回它的下标
            // 反之，则范湖-1
            // if(img.src.indexOf('joker.jpg')>=0){
            //     img.src = 'afterglow.jpg';
            // }else if(img.src.indexOf('afterglow.jpg')>=0){
            //     img.src = 'joker.jpg';
            // }
            // 写到这里，我们就简单实现了一个图片切换的效果。
            // 本来是 joker.jpg，点击之后，变成了 afterglow.jpg
            // 再次点击 afterglow.jpg，就会变成 joker.jpg
            // 每次点击图片，就会进行图片之间的交换。
        // }
    </script> -->
<!-- </body> -->



<!--<body>-->
    <!-- 给 input 表签添加一个value属性，并初始化赋值为  0-->
    <!-- <input type="text" id="number" value="0"> -->
    <!-- <div id="number">
        0
    </div> -->
    <!-- <button id="plus">+</button> -->

    <!-- <script>
        let plusBtn = document.querySelector('#plus');
        plusBtn.onclick = function(){
            // 1、获取到 number 里面的值
            let number = document.querySelector('#number');
            // let tmp = number.innerHTML;
            let tmp = number.value;
            tmp = parseInt(tmp);
            console.log(typeof tmp);
            // 2、将这个值加一，
            tmp += 1;
            // 3、再把这个值写回去
            number.value = tmp;
        }
    </script> -->
<!-- </body> -->



<!-- <body>
    <div id="screen">
        <ul>
            <li>aaa</li>
            <li>bbb</li>
            <li>ccc</li>
        </ul>
    </div>
    <button id="btn">这是获取内容按钮</button>
    <button id="btn2">这是修改内容按钮</button>
    <script>
        let btn= document.querySelector('#btn');
        btn.onclick = function() {
            let screen = document.querySelector('#screen');
            console.log(screen.innerHTML);
        }
        
        let btn2 = document.querySelector('#btn2');
        btn2.onclick = function(){
            let screen = document.querySelector('#screen');
            screen.innerHTML ='<h1> 修改后的内容</h1>';
        }
    </script>
</body> -->


<!-- <body> -->
    <!-- 创建一个按钮 -->
    <!-- <button onclick="f()">这是一个按钮</button> -->

    <!-- <script>
        // let f = function (){
        //     alert('hello');
        // }

        // 通过 document.querySelector('button') 来获取 按钮元素/对象
        // 将获取到的对象 赋予 button
        // let button = document.querySelector('button');
        // 通过 .onclick, 给 button 添加点击事件。
        // 事件源：button 对象/标签
        // 事件类型：鼠标点击事件
        // 事件处理程序： 匿名函数里面的执行内容：弹出一个 对话框，内容 hello
        // button.onclick =  function(){
        //     alert("hello");
        // }
    </script> -->
<!-- </body> -->


<!--<body>-->
    <!-- 这就是一个DOM对象 -->
    <!--<div class="one">
        hello
    </div>
    <div id="two">
        hello two
    </div>
    <ul>
        <li>aaa</li>
        <li>bbb</li>
        <li>ccc</li>
        <li>ddd</li>
    </ul>
    <script>
        // 在获取元素的时候，使用 document.querySelector('CSS的选择器' )来进行获取
        let div = document.querySelector('.one');
        // querySelector 就会根据 选择器里面的内容，来去选中页面双对应的值 
        console.log(div);

        // 通过 id 选择器，选中对应的元素。
        let obj = document.querySelector('#two');
        console.log(obj);

        let obj1 = document.querySelectorAll('ul li');
        console.log(obj1);
    </script>
</body> -->


<!--<body>
 <script>
        // {} 就是 一个 匿名对象
        // 将这个对象赋予 变量 student
        let student = {
            // 属性
            name: 'cxk',
            age: 20,
            height: 178,
            weiight: 120,

            // 方法
            sing: function(){
                console.log('鸡你太美')
            },

            jump: function(){
                console.log('一段舞蹈');
            },
        };
        console.log(student.name,student.age,student.height,student.weiight);
        student.sing();
        student.jump();
    </script>
</body>-->


<!-- <body>
    <script>
        let num = 10;
        function hello2(){
            let num = 20;
            function hello(){
                console.log(num);
            }
            hello();
        }
        hello2();
    </script>
</body> -->

<!-- <body>
    <script>
       let f = function (){
            console.log('hello');
        }
        f();
    </script>
</body> -->

<!-- <body>
    <script>
        function hello(){
            console.log('hello');
        }
        let f = hello;
        console.log(typeof f);
        f();
    </script>
</body> -->

<!--<body>
  <script>
        // add 函数组中，最多支持 7 个参数的相加
        function add(a,b){
            a = a||0;
            b = b||0;
            return a+b;
        }
        console.log(add(10,20,30));
        console.log(add(10,20,30,40));
    </script>
</body> -->

<!-- <body>
    <script>
        function add(x,y){
            return x + y;
        }
        let result = add(10,20);
        console.log(result);

        result = add('hello',' world');
        console.log(result);

        result = add('hello',10);
        console.log(result);
    </script>
</body> -->

<!-- <body>
    <script>
        hello();
        function hello(){
            console.log('hello');
        }
        hello();
    </script>
</body> -->

<!-- <body>
    <script>
        let arr = [1,2,3,4,5,6];
        arr.splice(2,3,300,400,500);
        console.log(arr);
    </script>
</body> -->

<!-- <body>
    <script>
        let arr = [];
        for(let i = 0;i < 10;i++){
            arr.push(i);
        }
        console.log(arr);
    </script>
</body> -->


<!-- ><body>
    <script>
        // let arr = [1,2,3,4];
        // console.log(arr.length);
        // console.log(arr);
        // arr.length = 5;
        // console.log(arr.length);
        // console.log(arr);
        // console.log(arr[0]);
        // console.log(arr[1]);
        // console.log(arr[2]);
        // console.log(arr[3]);

        // arr.hello = 10;
        // console.log(arr);
        // console.log(arr.hello);
        // console.log(arr['hello']);
    </script>
</body>-->


<!-- <body>
    <script> 
        // let arr = [1,2,3,4];
        // console.log(arr[0]);
        // console.log(arr[1]);
        // console.log(arr[2]);
        // console.log(arr[3]);
        // arr[-1] = 10;
        // console.log(arr)
        // console.log(arr[-1]);

        // arr[100] = 10;
        // console.log(arr);
        // console.log(arr[100]);
        // console.log(arr[-1]);
    </script>
</body>-->
<!-- <body>
    <script>
        let arr = [];
        let arr2 = [1,2,3,4];
        let arr3 = [1,'hello',[],null,undefined,true];
        console.log(arr);
        console.log(arr2);
        console.log(arr3);
    </script>
</body> -->
<!-- <body>
    <script>
        let arr = new Array();
    </script>
</body> -->

<!-- <body>
    <script>
        let i = 1;
        while (i <= 5) { 
            if (i == 3) {
                i++;
                continue;
            }
            console.log("我在吃第" + i + "个李子");
            i++;
        }
    </script>
</body> -->

<!-- <body>
    <script>
        console.log(1/2);
    </script>
</body> -->

<!-- <body>
    <script>
        let x = null;
        if(!x){
            x=0;
        }
    </script>
</body> -->

<!-- <body>
    <script>
        let a = 10;
        let b = '10';
        console.log(a == b);
        console.log(a === b);
    </script>
</body> -->


<!-- <body> 
    <script>
        let a = null;
        console.log(a+10);
        console.log(a + "10");
    </script>
</body> -->


<!-- <body>
    <script>
        let a  ;
        console.log(a+10);
    </script>
</body> -->

<!-- <body>
    <script>
        let s = 'hello';
        let s2 = ' world';

        console.log(10+20+s+s2);
    </script>
</body> -->

<!-- <body>
    <script>
        let s = '你好';
        console.log(s.length);
    </script>
</body> -->


<!-- <body>
    <script>
        let s = 'my name is "aaaaabbb"';
        console.log(s);
        let s2 = "my name is 'cccccddddd'";
        console.log(s2);
        let s3 = "my 'name' is \"cccccddddd\"";
        console.log(s3);
    </script>
</body> -->


<!-- <body>
    <script>
        let a = "haha";
        let b = 'hehe';
        let c = hehe; // 运行出错
    </script>
</body> -->
<!-- <body>
    <script>
        console.log(isNaN(10));
        console.log(isNaN('hello' - 10));
    </script>
</body> -->
<!-- <body>
    <script>
        console.log('hello' + 10);
    </script>
</body> -->


<!-- <body>
    <script>
        {
            let a = 10
        }
        console.log(a);
    </script>
</body> -->


<!-- <body>
    <script>
        let a = 10; 
        a = 'hhhhhh';
        console.log(a);
    </script>
</body> -->
<!-- <body>
    <script>
        var a = 10;
        a = 20;//修改
        console.log(a);//读取
    </script>
</body> -->
    <!-- <script>
        // 创建变量
        var num = 10;// 创建了一个名字为 num的，数字类型的变量
        var s = 'hello';//创建了一个名字为 s 的，字符串类型变量
        var arr = [];//创了一个名字为 arr的，数组类型的变量。
    </script> -->



    <!-- <script>
        console.log("hello log");
        consol.log('dasdadiaid');
    </script> -->
    
    <!-- <script>
        prompt("请输入你的姓名：");
    </script> -->


    <!-- <script src="app.js">
    </script>
    <script>
         alert("hello world sdasdasdas");
    </script> -->


    <!-- <button onclick="alert('hello world')">这是一个按钮</button> -->
    <!-- <script>
        alert('hello world');
    </script> -->
<!-- </body> -->
</html>